<%page expression_filter="h"/>
<%!
from django.utils.translation import ugettext as _
from openedx.core.djangolib.js_utils import (
    dump_js_escaped_json, js_escaped_string
)
%>

<%namespace name='static' file='/static_content.html'/>

<%block name="jsextra">
  <script>
    var save_url = '${save_url | n, js_escaped_string}';
    var schedule = ${schedule | n, dump_js_escaped_json};
  </script>
  <script src="${static.url('common/js/vendor/backbone.js')}"></script>
  <script src="${static.url('js/vendor/timepicker/jquery.timepicker.js')}"></script>
  <link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />
  <style>
    .ui-timepicker-list { z-index: 100000; }
    .ui-datepicker { z-index: 100000 !important; }
    input.date, input.time { width: auto !important; display: inline !important; }
  </style>
  <%static:js group='ccx'/>
</%block>

%for template_name in ["schedule"]:
  <script type="text/template" id="ccx-${template_name}-template">
    <%static:include path="ccx/${template_name}.underscore" />
  </script>
%endfor

<h2 class="hd hd-2">${_('Schedule')}</h2>
<div class="ccx-schedule-container">
  <div id="ccx-schedule"></div>
  <div id="new-ccx-schedule"></div>
</div>

<div id="enter-date-modal" class="modal"
         tabindex="-1" role="dialog" aria-labelledby="ccx_schedule_set_date_heading">
  <div class="inner-wrapper">
    <button class="close-modal">
      <span class="icon fa fa-remove" aria-hidden="true"></span>
      <span class="sr">${_("Close")}</span>
    </button>
    <header>
      <h2 id="ccx_schedule_set_date_heading"></h2>
    </header>
    <form class="ccx-form">
      <div class="field datepair">
        ## Translators: This explains to people using a screen reader how to interpret the format of YYYY-MM-DD
        <label class="sr form-label" for="ccx_dialog_date">${_('Date format four digit year dash two digit month dash two digit day')}</label>
        <input placeholder="${_('Date')}" class="date" type="text" name="date" id="ccx_dialog_date" size="11" />
        ## Translators: This explains to people using a screen reader how to interpret the format of HH:MM
        <label class="sr form-label" for="ccx_dialog_time">${_('Time format two digit hours colon two digit minutes')}</label>
        <input placeholder="${_('Time')}" class="time" type="text" name="time" id="ccx_dialog_time" size="6" />
      </div>
      <div class="field">
        <button type="submit" class="btn btn-primary">${_('Set date')}</button>
      </div>
    </form>
  </div>
</div>

<div class="ccx-schedule-sidebar">
  <div class="ccx-sidebar-panel" id="dirty-schedule" tabindex="-1" role="region"
       aria-labelledby="ccx_schedule_save_changes_heading">
    <h3 class="hd hd-3" id="ccx_schedule_save_changes_heading">${_('Save changes')}</h3>
    <form>
      <p id="message_save" class="text-helper">${_("You have unsaved changes.")}</p>
      <div class="field">
        <br/>
        <button id="save-changes" aria-describedby="message_save" class="ccx-schedule-save-changes">${_("Save changes")}</button>
      </div>
    </form>
  </div>
  <div class="ccx-sidebar-panel" id="ajax-error" tabindex="-1" role="region" aria-labelledby="ccx_schedule_error_message">
    <h3 class="hd hd-2">${_('Error')}</h3>
    <p id="ccx_schedule_error_message" class="text-helper">${_("There was an error saving changes.")}</p>
  </div>
  <div class="ccx-sidebar-panel" aria-labelledby="ccx_schedule_unit"
       id="ccx_schedule_unit_panel" role="region">
    <h3 class="hd hd-3" id="ccx_schedule_unit">${_('Schedule a Unit')}</h3>
    <form role="form" id="add-unit" name="add-unit" class="ccx-form">
      <div class="field">
        <label for="ccx_chapter" class="form-label"><b>${_('Section')}</b></label>
        <select name="chapter" id="ccx_chapter" ></select>
      </div>
      <div class="field">
        <label for="ccx_sequential" class="form-label"><b>${_('Subsection')}</b></label>
        <select name="sequential" id="ccx_sequential"></select>
      </div>
      <div class="field">
        <label for="ccx_vertical" class="form-label"><b>${_('Unit')}</b></label>
        <select name="vertical" id="ccx_vertical"></select>
      </div>
      <div class="ccx_start_date_time_fields">
        <div class="field datepair">
          <label for="ccx_start_date" class="form-label">
              <b>${_('Start Date')}</b>
              <span class="sr">
                ## Translators: This explains to people using a screen reader how to interpret the format of YYYY-MM-DD
                &nbsp;${_('format four digit year dash two digit month dash two digit day')}
              </span>
          </label>
          <input placeholder="${_('yyyy-mm-dd')}" type="text" class="date" name="start_date" id="ccx_start_date" />
          ## Translators: This explains to people using a screen reader how to interpret the format of HH:MM
          <label for="ccx_start_time" class="sr form-label">${_('Start time format two digit hours colon two digit minutes')}</label>
          <input placeholder="${_('time')}" type="text" class="time" name="start_time" id="ccx_start_time"/>
        </div>
      </div>
      <div class="ccx_due_date_time_fields">
        <div class="field datepair">
          <label for="ccx_due_date" class="form-label">
              <b>${_('Due Date')}</b> ${_('(Optional)')}
              <span class="sr">
                  ## Translators: This explains to people using a screen reader how to interpret the format of YYYY-MM-DD
                  &nbsp;${_('format four digit year dash two digit month dash two digit day')}
              </span>
          </label>
          <input placeholder="${_('yyyy-mm-dd')}" type="text" class="date" name="due_date" id="ccx_due_date"/>
          ## Translators: This explains to people using a screen reader how to interpret the format of HH:MM
          <label for="ccx_due_time" class="sr form-label">${_('Due Time format two digit hours colon two digit minutes')}</label>
          <input placeholder="${_('time')}" type="text" class="time" name="due_time" id="ccx_due_time"/>
        </div>
      </div>
      <div class="field">
        <br/>
        <button id="add-unit-button">${_('Add Unit')}</button>
      </div>
      <div class="field">
        <br/>
        <button id="add-all">${_('Add All Units')}</button>
      </div>
    </form>
    <div id="all-units-added" tabindex="-1" role="region">
      ${_("All units have been added.")}
    </div>
  </div>
</div>

<script>
$(function() {
    schedule_template = _.template($('#ccx-schedule-template').html());
    var view = new edx.ccx.schedule.ScheduleView({
        el: $('#new-ccx-schedule')
    });
    view.render();
    //ccx_schedule.render();
    $('.datepair .time').timepicker({
        'showDuration': true,
        'timeFormat': 'G:i',
        'autoclose': true
    });
    $('.datepair .date').datepicker({
        'dateFormat': 'yy-mm-dd',
        'autoclose': true
    });
    $('.datepair .date').change(function() {
       var date = $(this).datepicker( "getDate" );
       if (date) {
           $(this).val(date.getFullYear() + "-" +
                   ('0' + (date.getMonth() + 1)).slice(-2) + "-" +
                   ('0' + date.getDate()).slice(-2));
       }
    });
});
</script>
